<template>
	<view>
		<view>
			<view class="input-box">
				<text class="input-title">昵称</text>
				<input v-if="btnFont == '确定'" type="text" v-model="name" placeholder="请输入昵称" placeholder-style="font-size: 26rpx;" />
				<input v-else disabled type="text" v-model="name" placeholder-style="font-size: 26rpx;" />
			</view>
			
			<view class="input-box">
				<text class="input-title">快手账号</text>
				<input v-if="btnFont == '确定'" type="text" v-model="account" placeholder="请输入快手账号" placeholder-style="font-size: 26rpx;" />
				<input v-else disabled type="text" v-model="account" placeholder-style="font-size: 26rpx;" />
			</view>
		</view>
		
		<view @click="bingKuaishou" class="confirm-btn">{{ btnFont }}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'',
				account:'',
				userInfo:{},
				btnFont:'确定'
			};
		},
		onLoad() {
			this.getUserInfo();
		},
		methods:{
			// 获取个人用户信息
			getUserInfo: function() {
				this.$api.getUserInfo(res=>{
					this.userInfo = res.data
					if(this.userInfo.is_kuaishou) {
						this.name = this.userInfo.kuaishou[0].name
						this.account = this.userInfo.kuaishou[0].account
						this.btnFont = '换绑'
					}
				})
			},
			
			bingKuaishou() {
				if(this.btnFont == '换绑') {
					this.name = ''
					this.account = ''
					this.btnFont = '确定'
					return
				}
				if(!this.name) {
					this.$common.errorToShow('请输入昵称')
					return
				}
				if(!this.account) {
					this.$common.errorToShow('请输入快手账号')
					return
				}
				this.$api.bingKuaishou({
					name:this.name,
					account:this.account
				},res => {
					if(res.status == 200) {
						this.$common.successToShow('绑定成功')
						this.name = ''
						this.account = ''
					}
				})
			}
		}
	}
</script>

<style lang="less">
page {
	background-color: #FFFFFF;
}
.input-box {
    width: 690rpx;
    height: 90rpx;
    background: #f5f5f5;
    border-radius: 120rpx;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin: 30rpx auto;
    position: relative;
	.input-title {
	    font-size: 30rpx;
	    margin: 0 30rpx 0 40rpx;
	}
	input {
	    display: block;
	    font-size: 32rpx;
	    line-height: 1.4em;
	    height: 1.4em;
	    min-height: 1.4em;
	    overflow: hidden;
		margin-top: 5rpx;
	}
}
.confirm-btn {
    width: 690rpx;
    height: 100rpx;
    background: -webkit-linear-gradient(317deg,#e25a29,#f4a323);
    background: linear-gradient(133deg,#e25a29,#f4a323);
    border-radius: 120rpx;
    text-align: center;
    line-height: 100rpx;
    margin: 20rpx auto;
    color: #fff;
    font-size: 32rpx;
}
</style>
